<template>
	<view class="wrap">
		<view class="content">
			<view class="empty">
				<u-empty v-if="lists.length == 0" text="暂无商品"></u-empty>
			</view>
			<view class="lists">
				<view class="item" v-for="(item, index) in lists" :key="index" @tap="routerTo(`/pageB/goodDetail?id=${item.id}`)">
					<view class="img_wrap">
						<!-- #ifdef MP-WEIXIN -->
						<image lazy-load :src="item.image" mode=""></image>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<easy-loadimage class="image" :scroll-top="scrollTop" :image-src="item.image"></easy-loadimage>
						<!-- #endif -->
					</view>
					<view class="detail">
						<view class="name">
							{{item.name}}
						</view>
						<view class="price">
							￥{{item.member_price}} <text
								style="font-size: 12px;text-decoration: line-through;margin-left: 5px;">￥{{item.original_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
		list
	} from '@/api/index.js'

	export default {
		data () {
			return {
				id: '',
				page: 1,
				last_page: '',
				lists: []
			}
		},
		
		onLoad (options) {
			this.id = options.id
			this.getData()
		},
		
		onReachBottom () {
			if (this.page == this.last_page) {
				uni.showToast({
					title: '已经是最后一页了',
					icon: 'none'
				})
			} else {
				this.page++
				this.getData()
			}
		},
		
		methods: {
			async getData() {
				if (this.page == 1) {
					this.lists = []
				}
				list({
					page: this.page,
					category_id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.last_page = res.data.last_page
						res.data.data.forEach(item => {
							this.lists.push(item)
						})
					}
				})
			},
			
			routerTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		min-height: 100vh;
		height: fit-content;
		padding: 24rpx;
		background-color: #f6f6f6;
		box-sizing: border-box;
		
		.content {
			
			.lists {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 24rpx;
				
				.item {
					background-color: #fff;
					display: flex;
					flex-direction: column;
					border-radius: 5rpx;
					box-sizing: border-box;
					overflow: hidden;
					
					.img_wrap {
						width: 100%;
											
						.image {
							width: 100%;
							height: 220rpx;
							border-radius: 8rpx;
						}
						image {
							width: 100%;
							height: 220rpx;
							border-radius: 8rpx;
						}
					}
					
					.detail {
						width: 100%;
						display: flex;
						flex-direction: column;
						color: #000;
						padding: 24rpx;
						height: fit-content;
						justify-content: space-around;
						box-sizing: border-box;
					
						.name {
							font-size: 26rpx;
							font-weight: 700;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-bottom: 24rpx;
						}
					
						.price {
							font-size: 30rpx;
							color: #EA504F;
						}
					}
				}
			}
		}
	}
</style>